<template>
  <div style="color:#333">
    <div style="padding:0 0.2667rem;background:#fff;">
      <div class="flex region" style="padding:0.4rem 0rem">
        <div class="name">
          意向区域：
          <div style="font-size:0.22rem;color:#999">(可添加多个)</div>
        </div>

        <div>
          <div class="vertical" v-for="(item,index) in region" :key="item.name">
            <div @click="setArea(index,2)">
              <span style="color:red">*</span>
              {{item.city}}
              <span class="san"></span>
            </div>
            <div @click="setArea(index,3)">
              {{item.district}}
              <span class="san"></span>
            </div>
            <div>
              <input
                type="text"
                placeholder="所在村/社区名称"
                :value="item.village"
                @input="villageipt(index,$event)"
              />
            </div>
            <img
              src="../assets/del.png"
              alt
              style="width:0.3733rem;height:0.3733rem"
              v-if="index != 0 "
              @click="delRegion"
            />
          </div>
        </div>
      </div>
      <div class="vertical add" @click="addRegion">
        <img
          src="../assets/add.png"
          alt
          style="width:0.3733rem;height:0.3733rem;margin-right:0.2667rem"
        />
        <span>添加区域</span>
      </div>
    </div>

    <div class="flex1" style="margin-top: 0.2667rem;border-color:rgb(249, 249, 249);">
      <div class="name">毛胚房：</div>
      <van-radio-group v-model="isRoughcast">
        <div class="checkbox_box">
          <van-radio
            v-for="(item) in roughcast"
            :key="item.value"
            :name="item.name"
            icon-size="12"
            checked-color="#F6CD48"
          >{{ item.value }}</van-radio>
        </div>
      </van-radio-group>
    </div>
    <div class="flex1">
      <div class="name">电梯楼：</div>
      <van-radio-group v-model="isElevatorBuilding" @click="isElevatorBuilding = item.name">
        <div class="checkbox_box">
          <van-radio
            v-for="(item) in elevatorBuilding"
            :key="item.value"
            :name="item.name"
            icon-size="12"
            checked-color="#F6CD48"
          >{{ item.value }}</van-radio>
        </div>
      </van-radio-group>
    </div>

    <div class="flex1" style="border-color:rgb(249, 249, 249);">
      <div class="name">层数要求：</div>
      <div class="vertical" @click="showPrick_on('minFloors')">
        不少于
        <span style="margin:0 0.2667rem;">
          {{minFloors}}
          <span class="san"></span>
        </span>
        层
      </div>
    </div>
    <div class="flex1">
      <div class="name">已出租的百分比：</div>
      <div @click="showPrick_rentedPercent('rentedPercent')">
        不低于
        <span style="margin:0 0.2667rem;">
          {{rentedPercent_text}}
          <span class="san"></span>
        </span>
      </div>
    </div>
    <div class="flex1" style="margin-top: 0.2667rem;border-color:rgb(249, 249, 249);">
      <div class="name">月租范围：</div>
      <van-radio-group v-model="monthlyRentRange" style="width:10rem">
        <div class="radio_box">
          <van-radio
            v-for="(item) in monthlyRentList"
            :key="item.value"
            :name="item.name"
            icon-size="12"
            checked-color="#F6CD48"
          >{{ item.value }}</van-radio>
          <div>
            <van-radio name="自定义" icon-size="12" checked-color="#F6CD48">
              自定义：
              <input
                type="text"
                class="radioipt"
                @input="on_monthly1($event)"
                :value="monthly1"
              /> -
              <input type="text" class="radioipt" @input="on_monthly2($event)" :value="monthly2" /> 元
            </van-radio>
          </div>
        </div>
      </van-radio-group>
    </div>
    <div class="flex1" style="margin-top: 0.2667rem;border-color:rgb(249, 249, 249);">
      <div class="name" style="width:3rem">期望包租年份范围：</div>
      <div>
        <span style="margin:0 0.2667rem;" @click="year('year')">
          {{rentYearsRange}}
          <span class="san"></span> &nbsp;年
        </span>
      </div>
    </div>
    <button class="but" @click="sub">{{isNew ? "提交" : "保存"}}</button>

    <van-popup v-model="isArea" position="bottom">
      <van-area
        :area-list="areaList"
        @confirm="confirm"
        @cancel="cancel"
        :columns-num="columns_num"
      />
    </van-popup>
    <van-popup v-model="showPrick" position="bottom">
      <van-picker
        :columns="columns"
        @confirm="prickConfirm"
        @cancel="showPrick = false"
        show-toolbar
        :default-index="default_index"
      />
    </van-popup>
  </div>
</template>

<script>
import { ajax, login } from "../js/api";
import { Dialog, Toast } from "vant";
import areaFormat from "./comm/area";
export default {
  name: "HelloWorld",
  data() {
    return {
      region: [{ omit: "", city: "城市", district: "区县", village: "" }],
      regionIndex: 0,
      roughcast: [
        { value: "不限", name: "" },
        { value: "是", name: true },
        { value: "否", name: false }
      ], //是否毛坯
      isRoughcast: "", //是否毛坯

      elevatorBuilding: [
        { value: "不限", name: "" },
        { value: "是", name: true },
        { value: "否", name: false }
      ], //是否毛坯
      isElevatorBuilding: "", //是否电梯房
      monthlyRentList: [
        { value: "不限", name: "" },
        { value: "500元以内", name: 500 },
        { value: "500-700元", name: "500-700" },
        { value: "700-1000元", name: "700-1000" },
        { value: "1000-1500元", name: "1000-1500" },
        { value: "1500-2000元", name: "1500-2000" },
        { value: "2000-3000元", name: "2000-3000" },
        { value: "3000元以上", name: "3000" }
      ], //月租范围
      monthly1: "",
      monthly2: "",
      monthlyRentRange: "", //月租范围
      columns: [],
      minFloors: "不限", //楼层范围
      rentedPercent: "", //已出租的出租房占比
      rentedPercent_text: "不限", //已出租的出租房占比
      rentYearsRange: "不限", //期望包租年份范围

      isArea: false,
      showPrick: false,
      prickType: "",
      areaList: areaFormat,
      default_index: 0,
      isNew: true,

      id: "",
      columns_num: 3
    };
  },
  components: {},
  methods: {
    addRegion() {
      console.log(2);
      this.region.push({
        omit: "",
        city: "城市",
        district: "区县",
        village: ""
      });
    },
    delRegion() {
      this.region.pop();
    },
    setArea(e, num = 3) {
      this.isArea = true;
      this.regionIndex = e;
      this.columns_num = num;
    },
    confirm(e) {
      console.log(this.region, this.regionIndex);
      if (this.columns_num == 2) {
        this.region[this.regionIndex].omit = e[0].name;
        this.region[this.regionIndex].city = e[1].name;
        this.region[this.regionIndex].district = "全部";
      } else {
        if (
          this.columns_num == 3 &&
          this.region[this.regionIndex].city != "城市"
        ) {
          if (e[1].name != this.region[this.regionIndex].city) {
            Dialog.alert({
              message: `请选择${this.region[this.regionIndex].city}的区县`
            });
            return;
          }
        } else {
          this.region[this.regionIndex].omit = e[0].name;
          this.region[this.regionIndex].city = e[1].name;
        }
        this.region[this.regionIndex].district = e[2].name;
      }
      this.isArea = false;
    },
    cancel() {
      this.isArea = false;
    },
    villageipt(index, e) {
      console.log();
      this.region[index].village = e.target.value;
    },
    showPrick_on(e) {
      this.columns = ["不限", 2, 3, 5, 6, 7, 8, 9];
      this.default_index = this.columns.indexOf(this.minFloors);
      this.prickType = e;
      this.showPrick = true;
    },
    showPrick_rentedPercent(e) {
      this.columns = [
        { text: "不限", value: "" },
        { text: "10%", value: 10 },
        { text: "20%", value: 20 },
        { text: "30%", value: 30 },
        { text: "40%", value: 40 },
        { text: "50%", value: 50 },
        { text: "60%", value: 60 },
        { text: "70%", value: 70 },
        { text: "80%", value: 80 },
        { text: "90%", value: 90 },
        { text: "95%", value: 95 }
      ];
      let index = [];
      for (let i of this.columns) {
        index.push(i.value);
      }
      this.default_index = index.indexOf(this.rentedPercent);
      this.prickType = e;
      this.showPrick = true;
    },
    on_monthly1(e) {
      this.monthly1 = e.target.value;
    },
    on_monthly2(e) {
      this.monthly2 = e.target.value;
    },
    year(e) {
      this.prickType = e;
      this.columns = [
        { text: "不限", value: "" },
        { text: "1-3", value: "1-3" },
        { text: "4-6", value: "4-6" },
        { text: "7年以上", value: "7" }
      ];
      let index = [];
      for (let i of this.columns) {
        index.push(i.value);
      }
      this.default_index = index.indexOf(this.rentYearsRange);
      this.showPrick = true;
    },

    prickConfirm(e) {
      console.log(this.prickType);
      if (this.prickType == "minFloors") {
        this.minFloors = e;
        console.log(this.minFloors);
      } else if (this.prickType == "rentedPercent") {
        this.rentedPercent = e.value;
        this.rentedPercent_text = e.text;
      } else if (this.prickType == "year") {
        this.rentYearsRange = e.text;
      }

      this.showPrick = false;
    },
    sub() {
      let rentYearsRange = this.rentYearsRange,
        minFloors = this.minFloors,
        monthlyRentRange = this.monthlyRentRange;

      if (minFloors == "不限") {
        minFloors = "";
      }
       for (let i in this.region) {
        if (this.region[i].district == "区县" || this.region[i].city == "城市") {
          Dialog.alert({
            message: `请选正确的择意向区域`
          });
          return;
        }
      }
      let region = this.region.map(val => {
        if (val.district == "全部") {
          return `${val.omit}-${val.city}`;
        }
        if (val.village == "") {
          return `${val.omit}-${val.city}-${val.district}`;
        }
        return `${val.omit}-${val.city}-${val.district}-${val.village}`;
      });
      if (monthlyRentRange == "自定义") {
        console.log(this.monthly1, this.monthly2);
        if (Number(this.monthly1) > Number(this.monthly2)) {
          Dialog.alert({
            message: "请填写正确的月租范围"
          });
          return;
        }
        monthlyRentRange = this.monthly1 + "-" + this.monthly2;
      }
      let data = {
          userId: this.$store.state.userId,
          areas: region.join(","),
          isRoughcast: this.isRoughcast,
          isElevatorBuilding: this.isElevatorBuilding,
          minFloors: minFloors,
          rentedPercent: this.rentedPercent,
          rentYearsRange: rentYearsRange,
          monthlyRentRange: monthlyRentRange
        },
        that = this;
      console.log(data);
      if (this.isNew) {
        ajax("pushSettingOfTrusteeship", data, "POST", res => {
          console.log(res);
          if (res.data.code == 200) {
            Toast.success("提交成功！");
            setTimeout(() => {
              that.$router.go(-1);
            }, 3000);
          } else {
            Dialog.alert({
              message: res.data.msg
            });
          }
        });
      } else {
        ajax("pushSettingOfTrusteeship/" + this.id, data, "put", res => {
          console.log(res);
          if (res.data.code == 200) {
            Toast.success("更新成功！");
            setTimeout(() => {
              that.$router.go(-1);
            }, 3000);
          } else {
            Dialog.alert({
              message: res.data.msg
            });
          }
        });
      }
    },
    getold() {
      let that = this;
      ajax("pushSettingOfTrusteeship/last/one", "", "get", res => {
        if (res.data.code == 200) {
          try {
            that.region = res.data.data.areas.split(",").map(val => {
              return {
                omit: val.split("-")[0],
                city: val.split("-")[1],
                district: !val.split("-")[2] ? "全部" : val.split("-")[2],
                village: !val.split("-")[3]?'':val.split("-")[3]
              };
            });
          } catch (e) {
            that.region = [
              {
                omit: val.split("-")[0],
                city: val.split("-")[1],
                district: val.split("-")[2] == "" ? "全部" : val.split("-")[2],
                village: !val.split("-")[3]?'':val.split("-")[3]
              }
            ];
          }
          let monthlyRentList = [];
          for (let i of that.monthlyRentList) {
            monthlyRentList.push(i.name);
          }
          if (monthlyRentList.indexOf(res.data.data.monthlyRentRange) == -1) {
            that.monthlyRentRange = "自定义";
            that.monthly1 = res.data.data.monthlyRentRange.split("-")[0];
            that.monthly2 = res.data.data.monthlyRentRange.split("-")[1];
          } else {
            that.monthlyRentRange = res.data.data.monthlyRentRange;
          }
          that.id = res.data.data.id;
          that.isElevatorBuilding = res.data.data.isElevatorBuilding
            ? res.data.data.isElevatorBuilding
            : "";
          that.isRoughcast = res.data.data.isRoughcast
            ? res.data.data.isRoughcast
            : "";
          that.minFloors = res.data.data.minFloors
            ? res.data.data.minFloors
            : "不限";
          that.rentYearsRange = res.data.data.rentYearsRange;
          that.rentedPercent = res.data.data.rentedPercent;
          that.rentedPercent_text = res.data.data.rentedPercent
            ? res.data.data.rentedPercent + "%"
            : "不限";
        }
      });
    }
  },
  mounted() {
    this.isNew = this.$route.query.isNew;
    this.getold();
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.top {
  font-size: 0.28rem;
  color: #999;
  padding: 0.4rem 0.2667rem;
}
.flex {
  display: flex;
  /* align-items: center; */
  padding: 0.4rem 0.2667rem;
  background: #fff;
  font-size: 0.28rem;
  border-bottom: 0.0133rem solid #f2f2f2;
}

.flex1 {
  display: flex;
  padding: 0.4rem 0.2667rem;

  background: #fff;
  font-size: 0.28rem;
  border-bottom: 0.0133rem solid #f2f2f2;
}

.name {
  width: 3rem;
  /* padding-right: 0.6667rem; */
}

checkbox-group,
radio-group {
  width: 6.6667rem;
}

.checkbox_type {
  display: inline-block;
  width: 2.2rem;
}

.radio_price {
  display: inline-block;
  width: 3.3333rem;
  margin-bottom: 0.8667rem;
}

.radio_price_cus {
  display: flex;
  align-items: center;
  width: 8rem;
}

.radio_price_cus input {
  width: 1.3333rem;
  border: 0.0133rem solid #f2f2f2;
  border-radius: 0.2rem;
  text-align: center;
}

textarea {
  width: 6rem;
  height: 0.92rem;
  overflow: hidden;
}

.but {
  display: block;
  width: 9.4667rem;
  height: 1.1733rem;
  line-height: 1.1733rem;
  margin: 0.5333rem auto;
  background: rgba(246, 205, 72, 1);
  font-size: 0.3733rem;
  color: #333;
  border-radius: 0.5867rem;
}
.map {
  position: relative;
  width: 7.6rem;
  height: 4.4rem;
}
.hint {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0.5867rem;
  line-height: 0.5867rem;
  font-size: 0.2667rem;
  color: rgba(250, 45, 45, 1);
  background: rgba(246, 205, 72, 1);
  text-align: center;
  z-index: 999;
}
.region {
  border: 0;
}
.region > div > div > div {
  width: 2rem;
  margin-right: 0.2667rem;
  margin-top: 0.0667rem;
}
.region input {
  width: 100%;
}
.add {
  position: relative;
  justify-content: center;
  background: #fff;
  padding: 0.4rem;
  border-top: 0.0133rem solid #f2f2f2;
}
.add::after {
  content: "";
  position: absolute;
  top: -0.0133rem;
  left: 0rem;
  width: 2rem;
  height: 0.0267rem;
  background: #fff;
}
.checkbox_box {
  display: flex;
  /* justify-content: space-around; */
  /* width: 9.3333rem; */
}
.checkbox_box > .van-radio {
  width: 2rem;
  margin-right: 0.4rem;
}
.radio_box {
  display: flex;
  /* justify-content: space-around; */
  flex-wrap: wrap;
  /* width: 9.3333rem; */
}
.radio_box > .van-radio {
  width: 3rem;
  margin-bottom: 0.5333rem;
}
.radioipt {
  display: inline-block;
  width: 1.0667rem;
  height: 0.5333rem;
  text-align: center;
  border: 1px solid rgba(153, 153, 153, 1);
  border-radius: 0.1067rem;
}
</style>
